<script setup lang="ts">
import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n'
import { useDesign } from '@/hooks/web/useDesign'
import LockDialog from './components/LockDialog.vue'
import UpdatePwd from './components/UpdatePwd.vue'
import { computed, reactive, ref } from 'vue'
import LockPage from './components/LockPage.vue'
import { useUserStore } from '@/store/modules/user'
import { useStorage } from '@/hooks/web/useStorage'
import { isLockScreenApi } from '@/api/system/user'
const { getStorage, setStorage } = useStorage()
const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('user-info')

const { t } = useI18n()

const userStore = useUserStore()

const loginOut = () => {
  userStore.logoutConfirm()
}

const dialogVisible = ref<boolean>(false)
const updatePwdDialogVisible = ref<boolean>(false)

// 锁定屏幕
const lockScreen = () => {
  dialogVisible.value = true
}

const watchSessionStorage = async () => {
  const cacheIsLock = sessionStorage.getItem('isLock')
  if (cacheIsLock === undefined || cacheIsLock === null || cacheIsLock === '') {
    const res = await isLockScreenApi()
    if (res) {
      setStorage('isLock', res.data)
    }
  } else {
    isLock.lock = cacheIsLock
  }
}
// 添加监听事件
window.addEventListener('storage', watchSessionStorage)
const updatePwd = () => {
  updatePwdDialogVisible.value = true
}

const toDocument = () => {
  window.open('https://element-plus-admin-doc.cn/')
}
const isLock = reactive({
  lock: getStorage('isLock')
})
const lockFunction = () => {
  isLock.lock = true
}
const unlockFunction = () => {
  isLock.lock = false
}
</script>

<template>
  <ElDropdown class="custom-hover" :class="prefixCls" trigger="click">
    <div class="flex items-center">
      <img
        :src="userStore.getUserInfo?.avatar"
        alt=""
        class="w-[calc(var(--logo-height)-25px)] rounded-[50%]"
      />
      <span class="<lg:hidden text-14px pl-[5px] text-[var(--top-header-text-color)]">{{
        userStore.getUserInfo?.userName
      }}</span>
    </div>
    <template #dropdown>
      <ElDropdownMenu>
        <ElDropdownItem>
          <div @click="toDocument">{{ t('common.personalInformation') }}</div>
        </ElDropdownItem>
        <ElDropdownItem>
          <div @click="updatePwd">{{ t('common.updatePwd') }}</div>
        </ElDropdownItem>
        <ElDropdownItem>
          <div @click="lockScreen">{{ t('lock.lockScreen') }}</div>
        </ElDropdownItem>
        <ElDropdownItem divided>
          <div @click="loginOut">{{ t('common.loginOut') }}</div>
        </ElDropdownItem>
      </ElDropdownMenu>
    </template>
  </ElDropdown>

  <LockDialog v-if="dialogVisible" v-model="dialogVisible" :lock="lockFunction" />
  <UpdatePwd v-if="updatePwdDialogVisible" v-model="updatePwdDialogVisible" />
  <teleport to="body">
    <transition name="fade-bottom" mode="out-in">
      <LockPage v-if="isLock.lock" :unlock="unlockFunction" />
    </transition>
  </teleport>
</template>

<style scoped lang="less">
.fade-bottom-enter-active,
.fade-bottom-leave-active {
  transition:
    opacity 0.25s,
    transform 0.3s;
}

.fade-bottom-enter-from {
  opacity: 0;
  transform: translateY(-10%);
}

.fade-bottom-leave-to {
  opacity: 0;
  transform: translateY(10%);
}
</style>
